<template>
    <div clsss="update-password" style="background-color: #F5F5F5;">
        <wxc-minibar title="修改交易密码"></wxc-minibar>
        
        <div class="form" style="">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">原始交易密码</text>
            </div>
            <div class="form_fr">
               <input style="font-size: 28px;color: #A7A7A7;" type="password" class="input" v-model="oldpassword" @focus="focusoldpassword = true" maxlength="6" minlength="6" placeholder="请输入交易密码">
            </div>
        </div>
        <div class="form">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">新交易密码</text>
            </div>
            <div class="form_fr">
                <input style="font-size: 28px;color: #A7A7A7;" type="password" class="input" v-model="newpassword" @focus="focusnewpassword= true" maxlength="6" minlength="6" placeholder="6位数字密码">
            </div>
        </div>
        <div class="form">
            <div class="form_fl">
                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">确认交易密码</text>
            </div>
            <div class="form_fr">
                <input style="font-size: 28px;color: #A7A7A7;" type="password" class="input" v-model="confirmpassword" @focus="focusconfirmpassword= true" maxlength="6" minlength="6" placeholder="请再次输入新密码">
            </div>
        </div>
        <div class="button_box">
           <div class="button" @click="submitconfirm">
             <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #FFFFFF;">完成</text>
           </div>
        </div>
         <div class="button_box1">
           <div class="button1" @click="gofindpassword">
             <text style="font-family: PingFangSC-Medium;font-size: 32px;color:#E53935;">找回密码</text>
           </div>
        </div>
         <wxc-mask :show="alertCode" width="320" height="80" mask-bg-color="#333" :has-overlay="false"> 
			<div class="tip"><text class="tip-font">{{ content }}</text></div>
		</wxc-mask>
    </div>

</template>

<script>
    import { WxcMask } from 'weex-ui'
    
    import { postResponsesToken } from '@/api.js'
    import { getBaseUrl }  from "@/utils/index.js"
    import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
    
    let navigator = weex.requireModule('navigator')
    const modal = weex.requireModule('modal')
    const myAccount = new BroadcastChannel('app')
    export default {
        data(){
            return {
                alertCode:false,
                content:'',
                oldpassword:'',
                newpassword:'',
                confirmpassword:'',
                accountId:'',
                baseURL:'',
                focusoldpassword:false,
                focusnewpassword:false,
                focusconfirmpassword:false
            }
        },
        components:{
            WxcMask,
            WxcMinibar
        },
        created () {
             // 获取路径
            this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
        },
        methods: {
            alert(title, msg) {
                this.alertCode = true
                this.content= title
                if(this.close) return ;

                this.close = true

                setTimeout(()=>{
                    this.alertCode = false
                    this.close = false
                },2000)
            },
            
            gofindpassword(){
                navigator.push({
                    'url': this.baseURL + 'views/my-account/find-password.js',
                    'animated': 'true'
                })	
            },

            async submitconfirm(){
                if( !/^\d+$/.test(this.oldpassword) || !/^\d+$/.test(this.newpassword) || !/^\d+$/.test(this.confirmpassword)) {
                    this.alert('请输入6位数字密码')
                    return false
                }
                if(this.newpassword != this.confirmpassword){
                    this.alert('输入的确认密码不一致')
                    return false
                }
                if(this.oldpassword===this.newpassword){
                    this.alert('新密码不能和原密码一致')
                    return false 
                }

                let param = {
                    payPassword:this.oldpassword,
                    newPayPassword:this.newpassword,
                    type:4
                }

                let data = postResponsesToken('account/user/updatePayPassword', param)

                data.code === 0 ? navigator.pop() : this.alert(data.msg)

            }
        }
    };
</script>
<style scoped>

   .update-password{
       width:100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
      
     
    }
    .header {
        width: 750px;
        height: 90px;
        background-color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .header-img {
        position: absolute;
        left: 32px;
        top: 34px;
        margin-left: 0;
    }

    .header-title {
        font-size: 34px;
        color: #fff;
        font-weight: 600;
        font-family: PingFangSC-Medium;
    }
    .header-img-right {
        position: absolute;
        right: 32px;
        top:0;
        height: 90px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }
    .form{
        height: 112px;
        background-color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
          border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #f5f5f5;
    }
    .form_fl{
      width: 300px;
      padding-left: 32px;
    }
    .form_fr{
       width: 386px;
       padding-right: 32px;
    }
    .input{
        height:80px;
        text-align: right;
    }
    .button_box{
        margin-top: 80px;
        padding-left: 32px;
        padding-right: 32px;
    }
     .button_box1{
        margin-top: 32px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 96px;
        background-color: #E70D0D;
        border-radius: 4px;
    }
       .button1{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 96px;
      border-style: solid;
      border-width: 1px;
      border-color: #E53935;
        border-radius: 4px;
    }
    .tip {
        width:320px;
        height: 80px;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .tip-font {
        color:#fff;
        font-size:28px;
    }
</style>